<template>
  <div>
    <!-- 顶部状态栏 -->
    <div class="detail_top_status_div" v-if="view.isShowStatusDiv" :class="serverData.statusClass">
      <img :src="'./static/img/'+serverData.statusImg">
      <span class="status_label">{{serverData.statusText}}</span>
    </div>
    <!-- end 顶部状态栏 -->
    <!-- 中间的div -->
    <div class="center_div">
      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">考核单信息</h3>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed user_box div_magin10 kaidan_info_list_my kaidan_info_detail">
        <div class="kaidan_box_top">
          <flexbox :gutter="0">
            <flexbox-item :span="5/10" class="user_group_div">
              <span class="span_status">{{ serverData.statusText }}</span>
              <span class="span_time">{{ serverData.checkOrder.stateTimeStr}}</span>
            </flexbox-item>
            <flexbox-item :span="5/10" align="right">
              <span class="span_name">{{ serverData.checkOrder.no}}</span>
            </flexbox-item>
          </flexbox>
        </div>
        <ul class="kaidan_buttom click_to_green">
          <li class="right_li">
            <span
              class="border_radus"
              :class="serverData.checkOrder.borderClass"
            >{{ serverData.checkOrder.scoringType==1 ? '+'+serverData.checkOrder.points : '-' +serverData.checkOrder.points }}分</span>
            {{serverData.checkOrder.checkBigCateName}}-{{serverData.checkOrder.checkItemName}}
          </li>
        </ul>
      </div>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">
            申诉描述
            <span class="color_red"></span>
          </h3>
        </flexbox-item>
      </flexbox>

      <div class="border_main reason_box div_magin10">
        <x-textarea
          :max="70"
          class="dskt_text_area"
          placeholder="请输入,最大字数70字"
          v-model="submitData.appealDesc"
        ></x-textarea>
      </div>

      <div class="upload_img_list div_magin10">
        <flexbox :gutter="0">
          <flexbox-item :span="1/4" v-for="(img , index) in submitData.imgList" :key="index">
            <div class="upload_box upload_img">
              <img :src="img.src" @click="showBigImg(index)">
              <icon
                @click.native="deleteImg(index)"
                type="delete_fill"
                class="delete_img iconfont_no_margin"
              />
            </div>
          </flexbox-item>
          <flexbox-item :span="1/4" v-if="submitData.imgList.length<4">
            <imgUpload @uploadOkEvent="uploadOkEvent" :defaultSrc="'./static/img/icon-AddPhoto.png'"></imgUpload>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <!-- end 中间的div -->
    <!-- 底部的按钮 -->
    <div class="buttom_div">
      <x-button type="primary" @click.native="doOk" class="dskt_btn">提交申诉</x-button>
    </div>

    <div>
      <previewer :list="submitData.imgList" ref="previewer"></previewer>
    </div>

    <!-- end 底部的按钮 -->
  </div>
</template>

<script>
import baseService from "../../shared/service/baseService";
import imgUpload from "../../components/imgUpload.vue";
import orderService from "../../shared/service/orderService";
import appealApplyService from "../../shared/service/appealApplyService";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { XImg, Previewer, XTextarea, dateFormat } from "vux";
export default {
  components: {
    XImg,
    Previewer,
    imgUpload,
    dateFormat,
    XTextarea
  },
  data() {
    var data = {
      viewType: this.$route.query.viewType,
      orderId: this.$route.query.orderId,
      isCanClick:true,
    };
    data.view = {
      isShowStatusDiv: false
    };
    //通过这个来判断是否有值
    data.submitData = {
      imgList: [],
      appealDesc: ""
    };
    data.serverData = {
      status: "sx",
      statusText: "生效",
      statusClass: "color_green", //color_grey  color_red  color_green
      statusImg: "icon-InForce.png",
      checkOrder: {}
    };
    return data;
  },
  mounted() {
     weixinService.initWx(wx);
    this.doGetData(this.orderId);
  },
  methods: {
    doGetData(id) {
      this.$vux.loading.show();
      orderService.getCheckOrder(id, { hasImg: "hasImg" }).then(res => {
        var data = res.data;
        data.borderClass = data.scoringType == 1 ? "color_green" : "color_red";
        switch (data.checkState) {
          case 0:
            this.serverData.statusText = "撤回";
            this.serverData.statusClass = "color_red"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon- recall.png";
            data.borderClass = "color_grey_white";
            break;
          case 1:
            this.serverData.statusText = "生效";
            this.serverData.statusClass = "color_green"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-InForce.png";
            break;
          case 2:
            this.serverData.statusText = "撤消";
            this.serverData.statusClass = "color_grey"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon_no.png";
            data.borderClass = "color_grey_white";
            break;
        }
        data.stateTimeStr = dateFormat(
          this.$commonUtil.getDate(data.stateTime),
          "YYYY-MM-DD HH:mm"
        );
        this.serverData.checkOrder = data;
        this.$vux.loading.hide();
      });
    },
    uploadOkEvent(fileSrc) {
      this.submitData.imgList.push({ src: fileSrc, h: 500 });
    },
    getImgUploadNum(){
        return 4-this.submitData.imgList.length;
    },
    doOk() {
       if (!this.isCanClick) {
        return;
      }
      if (!this.submitData.appealDesc) {
        this.$vux.toast.text("请输入申诉理由!");
        return;
      }
      this.isCanClick=false;
      this.$vux.loading.show();
      var subImgList = [];
      for (let i = 0; i < this.submitData.imgList.length; i++) {
          const img = this.submitData.imgList[i];
          subImgList.push(img.src);
      }
      appealApplyService
        .doAppealApplyOrder(
          this.orderId,
          this.submitData.appealDesc,
          subImgList
        )
        .then(res => {
          this.$vux.loading.hide();
          this.$vux.toast.text("已提交! 请等待教师审核");
          this.$router.back(-1);
          this.isCanClick=true;
        }).catch((res) => {
                this.isCanClick=true;
                  this.$vux.loading.hide();
        });;
    },
    showBigImg(index) {
      this.$refs.previewer.show(index);
    },
    deleteImg(i) {
      this.submitData.imgList.splice(i, 1);
    }
  }
};
</script>
<style scoped>
@import "../../assets/scss/order-detail.scss";
</style>
<style scoped>
.center_div {
  padding: 8px 8px;
}
.buttom_div{
  width: 100%;
  height: 60px;
  position: absolute;
  z-index: 500;
  bottom: 0;
  background:rgba(242,251,254,1);
  box-sizing: border-box;
  box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.08);
  padding: 8px 20%;
}
.reason_box {
  margin: 15px 0;
}

.kaidan_info_detail.kaidan_info_list_my .span_name {
  font-size: 14px;
  color: #b8b8b8;
}
.kaidan_info_detail.kaidan_info_list_my .span_status {
  font-size: 18px;
  padding: 0 4px;
  font-weight: 550;
  color: #000;
}
.kaidan_info_detail.kaidan_info_list_my .span_time {
  font-size: 14px;
  color: #b8b8b8;
}
.kaidan_info_detail.kaidan_info_list_my .kaidan_box_top {
  padding-top: 15px;
  padding-bottom: 10px;
}
.kaidan_info_detail.kaidan_info_list_my .kaidan_buttom {
  padding-top: 10px;
  padding-bottom: 15px;
}
</style>
